<template>
  <div class="page">
    <van-nav-bar
      title="标题"
      :left-text="cityStore.curCityName"
      left-arrow
      @click-left="$router.push({ name: 'city' })"
    >
      <template #right>
        <van-icon name="search" size="18" @click="$router.push('/cinemas/search')" />
      </template>
    </van-nav-bar>

    <van-dropdown-menu ref="dmRef">
      <van-dropdown-item :title="districtName">
        <div class="box">
          <van-button
            v-for="(item, index) in districtList"
            :key="index"
            :class="{ active: item === districtName }"
            @click="onDistrictClick(item)"
          >
            {{ item }}
          </van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item v-model="ticket" :options="ticketOptions"></van-dropdown-item>
    </van-dropdown-menu>

    <div class="list">
      <van-cell-group>
        <van-cell
          v-for="item in displayCinemas"
          :key="item.cinemaId"
          :title="item.name"
          :value="item.districtName"
          :label="item.address"
          to="/center"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watchEffect } from 'vue'
import { type DropdownMenuInstance, showLoadingToast, closeToast } from 'vant'
import { type Cinema } from '@/api/interface'
import { useStore } from '@/hooks'
const { cityStore, cinemaStore } = useStore()

const dmRef = ref<DropdownMenuInstance | null>(null)
const ticketOptions = [
  { text: 'APP订票', value: 1 },
  { text: '前台兑换', value: 2 }
]
// 影院列表数据
const cinemas = ref<Cinema.Item[]>([])
// 当前选择的区名字
const districtName = ref('全城')
// 当前选择的方式
const ticket = ref(1)

// 区数据
const districtList = computed(() => {
  const arr = cinemas.value.map((item) => item.districtName)
  const tmp = Array.from(new Set(arr))
  return ['全城', ...tmp]
})

// 用于页面展示的影院列表数据
//    依赖项：cinemas、districtName
const displayCinemas = computed(() => {
  if (districtName.value === '全城') {
    // 如果当前选择的是 全城，则将 cinemas 原样返回
    return cinemas.value
  } else {
    // 做过滤
    return cinemas.value.filter((item) => item.districtName === districtName.value)
  }
})

/**
 * 区点击
 */
function onDistrictClick(item: string) {
  // 赋值
  districtName.value = item
  // 控制 dropdownMenu close
  dmRef.value?.close()
}

watchEffect(() => {
  showLoadingToast({
    duration: 0, // 展示时长，默认为2秒，设置为0变成不会自动消失
    forbidClick: true, // 禁止背景点击
    message: '加载中'
  })

  // 调用仓库的动作
  cinemaStore
    .getItems({ cityId: cityStore.curCityId as number, ticketFlag: ticket.value })
    .then((result) => {
      cinemas.value = result
      // 将 当前选择的 区修改成全城
      districtName.value = '全城'
    })
    .finally(() => {
      // 关闭 loading
      closeToast()
    })
})
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.list {
  flex: 1;
  overflow-y: auto;
}

.box {
  padding: 10px 0 0 10px;

  .van-button {
    padding: 0;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 80px;
    height: 30px;
    font-size: 12px;
  }

  .van-button.active {
    color: #ff5f16;
    border-color: #ff5f16;
  }
}
</style>
